<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
		<link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
		<style>
			.num_box{
				display: flex;
			}
			.num{
				width: 40px;
				display: inline-block;
			}
			.v-move{
				transition: all 0.5s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<transition-group enter-active-class="animate__animated animate__fadeInUp" mode="out-in">
				<div class="num" v-for="num in numList" :key="num">{{num}}</div>
			</transition-group>
			<div>
				<button @click="addNum">添加</button>
			</div>
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data() {
			return{
				numList:[1,2,3].reverse()
			}
		},
		methods:{
			addNum(){
				this.numList.unshift(this.numList[0]+1)
			}
		}
	})
	const vm = app.mount('#app')
</script>